/* ========================================
   流程设计器样式文件
   Process Designer Styles
   ======================================== */

/* ========================================
   1. 基础容器样式
   ======================================== */
.designer-container {
  display: flex;
  height: 90vh;
  position: relative;
}

.designer-canvas {
  flex: 1;
  min-width: 0;
  background: #fff;
  position: relative;
}

.vue-flow-canvas {
  width: 100%;
  height: 100%;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="white" stroke="%2352c41a" stroke-width="2"/><circle cx="12" cy="12" r="3" fill="%2352c41a"/></svg>') 12 12, auto;
}

/* VueFlow背景网格样式 */
:deep(.vue-flow__background) {
  width: 100% !important;
  height: 100% !important;
  min-height: 600px !important; /* 减少最小高度从800px到600px */
  background-size: 20px 20px !important;
  background-image:
    radial-gradient(circle, #e5e5e5 1px, transparent 1px) !important;
  background-position: 0 0, 10px 10px !important;
}

:deep(.vue-flow__background-pattern) {
  width: 100% !important;
  height: 100% !important;
  min-height: 600px !important; /* 减少最小高度从800px到600px */
}

:deep(.vue-flow__background svg) {
  width: 100% !important;
  height: 100% !important;
  min-height: 600px !important; /* 减少最小高度从800px到600px */
}

:deep(.vue-flow__background pattern) {
  width: 20px !important;
  height: 20px !important;
}

:deep(.vue-flow__background circle) {
  fill: #e5e5e5 !important;
  r: 1px !important;
}

/* 夜间模式背景网格样式 */
#htmlRoot[data-theme='dark'] :deep(.vue-flow__background) {
  background-image:
    radial-gradient(circle, #444 1px, transparent 1px) !important;
}

#htmlRoot[data-theme='dark'] :deep(.vue-flow__background circle) {
  fill: #444 !important;
  r: 1px !important;
}

/* ========================================
   2. 事件节点样式（开始/结束节点）
   ======================================== */
.event-node {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  position: relative;
}

/* 开始节点样式 */
.event-start {
  border-color: #52c41a;
  background: #f6ffed;
}

/* 结束节点样式 */
.event-end {
  border-color: #f5222d;
  background: #fff2f0;
}

/* 事件节点悬停效果 */
.event-node:hover {
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.20);
  transform: scale(1.05);
  z-index: 100;
}

/* 事件节点选中状态 */
.event-node.selected {
  box-shadow: 0 6px 28px 0 rgba(0,0,0,0.15);
  border-color: #409eff;
  z-index: 50;
}

/* 事件节点内容样式 */
.event-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
}

.event-icon {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
}

.event-label {
  font-size: 12px;
  font-weight: 500;
  color: #333;
  line-height: 1.2;
}

/* ========================================
   3. 网关节点样式
   ======================================== */
.gateway-node {
  width: 80px;
  height: 80px;
  background: #fff;
  border: 3px solid #faad14;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  position: relative;
}

.gateway-node:hover {
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.20);
  transform: scale(1.05);
  z-index: 100;
}

.gateway-node.selected {
  box-shadow: 0 6px 28px 0 rgba(0,0,0,0.15);
  border-color: #409eff;
  z-index: 50;
}

.gateway-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
}

.gateway-icon {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 2px;
}

.gateway-label {
  font-size: 10px;
  font-weight: 500;
  color: #333;
  line-height: 1.2;
}

/* ========================================
   4. 任务节点样式（用户任务、任务、抄送、子流程）
   ======================================== */
.task-node,
.user-task-node,
.cc-node,
.sub-process-node {
  min-width: 140px;
  min-height: 60px;
  background: #fff;
  border: 2px solid #d9d9d9;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  position: relative;
}

/* 任务节点默认样式 */
.task-node {
  border-color: #722ed1;
  background: #f9f0ff;
}

.user-task-node {
  border-color: #1890ff;
  background: #f0f8ff;
}

.cc-node {
  border-color: #13c2c2;
  background: #f6fffe;
}

.sub-process-node {
  border-color: #eb2f96;
  background: #fff0f6;
}

/* 任务节点悬停效果 */
.task-node:hover,
.user-task-node:hover,
.cc-node:hover,
.sub-process-node:hover {
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.20);
  transform: translateY(-2px);
  z-index: 100;
}

/* 任务节点选中状态 */
.task-node.selected,
.user-task-node.selected,
.cc-node.selected,
.sub-process-node.selected {
  box-shadow: 0 6px 28px 0 rgba(0,0,0,0.15);
  border-color: #409eff;
  z-index: 50;
}

/* 任务节点内容样式 */
.task-content,
.user-task-content,
.cc-content,
.sub-process-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
}

.task-icon,
.user-task-icon,
.cc-icon,
.sub-process-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.task-label,
.user-task-label,
.cc-label,
.sub-process-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: center;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================
   5. 连接点样式
   ======================================== */
.vue-flow__handle {
  width: 20px !important;
  height: 12px !important;
  border-radius: 6px !important;
  border: 2px solid #fff !important;
  background: #b1b1b7 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  transform-origin: center center !important;
}

.vue-flow__handle:hover {
  background: #409eff !important;
  transform: scale(1.2) !important;
}

.vue-flow__handle.connecting {
  background: #409eff !important;
  transform: scale(1.2) !important;
}

.vue-flow__handle.connected {
  background: #52c41a !important;
}

/* 连接点位置调整 */
.handle-left {
  left: -10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.handle-right {
  right: -10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.handle-top {
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.handle-bottom {
  bottom: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* 修复连接点hover时的transform冲突 */
.handle-left:hover,
.handle-right:hover {
  transform: translateY(-50%) scale(1.2) !important;
}

.handle-top:hover,
.handle-bottom:hover {
  transform: translateX(-50%) scale(1.2) !important;
}

.handle-left.connecting,
.handle-right.connecting {
  transform: translateY(-50%) scale(1.2) !important;
}

.handle-top.connecting,
.handle-bottom.connecting {
  transform: translateX(-50%) scale(1.2) !important;
}

/* ========================================
   6. 连接点基础样式
   ======================================== */
/* 所有节点的连接点基础样式 */
.custom-handle {
  width: 20px;
  height: 12px;
  border-radius: 6px;
  border: 2px solid #fff;
  background: #b1b1b7;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 10;
  transition: all 0.2s ease;
  cursor: pointer;
}

.custom-handle:hover {
  background: #52c41a;
  transform: scale(1.2);
}

.custom-handle.connecting {
  background: #52c41a;
  transform: scale(1.2);
}

/* 连接点位置调整 */
.handle-left {
  left: -10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.handle-right {
  right: -10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.handle-top {
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.handle-bottom {
  bottom: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* 修复连接点hover时的transform冲突 */
.handle-left:hover,
.handle-right:hover {
  transform: translateY(-50%) scale(1.2) !important;
}

.handle-top:hover,
.handle-bottom:hover {
  transform: translateX(-50%) scale(1.2) !important;
}

.handle-left.connecting,
.handle-right.connecting {
  transform: translateY(-50%) scale(1.2) !important;
}

.handle-top.connecting,
.handle-bottom.connecting {
  transform: translateX(-50%) scale(1.2) !important;
}

/* ========================================
   7. 夜间主题适配
   ======================================== */
#htmlRoot[data-theme='dark'] .vue-flow-canvas {
  background: #1f1f1f;
}

#htmlRoot[data-theme='dark'] .event-node {
  background: #2d2d2d !important;
  border-color: #444 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

#htmlRoot[data-theme='dark'] .event-start {
  border-color: #52c41a !important;
  background: #1a3a1a !important;
}

#htmlRoot[data-theme='dark'] .event-end {
  border-color: #f5222d !important;
  background: #3a1a1a !important;
}

#htmlRoot[data-theme='dark'] .gateway-node {
  background: #2d2d2d !important;
  border-color: #faad14 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

#htmlRoot[data-theme='dark'] .gateway-node:hover,
#htmlRoot[data-theme='dark'] .gateway-node.selected {
  border-color: #409eff !important;
}

#htmlRoot[data-theme='dark'] .task-node,
#htmlRoot[data-theme='dark'] .user-task-node,
#htmlRoot[data-theme='dark'] .cc-node,
#htmlRoot[data-theme='dark'] .sub-process-node {
  background: #2d2d2d !important;
  border-color: #444 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

#htmlRoot[data-theme='dark'] .task-node:hover,
#htmlRoot[data-theme='dark'] .user-task-node:hover,
#htmlRoot[data-theme='dark'] .cc-node:hover,
#htmlRoot[data-theme='dark'] .sub-process-node:hover {
  border-color: #409eff !important;
}

#htmlRoot[data-theme='dark'] .custom-handle {
  background: #666 !important;
  border-color: #2d2d2d !important;
}

#htmlRoot[data-theme='dark'] .custom-handle:hover,
#htmlRoot[data-theme='dark'] .custom-handle.connecting {
  background: #52c41a !important;
}
